import React, {FC, useCallback, useEffect, useMemo, useState} from "react";
import {DatePicker} from "antd";
import dayjs from "dayjs";
import "dayjs/locale/zh";
import "dayjs/locale/en";
import Config from "../../Config.tsx";
import {getItem} from "../../services/LocalDataService.tsx";
import {isArray, isNumber} from "../../utils";

interface SelectDateRangeProps {
    value?: any,
    ds?: any,
    picker?: "time" | "date" | "week" | "month" | "quarter" | "year",
    disabled: boolean,
    onChange: Function,
    comProps: any,
    disabledDay: number
}

const SelectDateRange: FC<SelectDateRangeProps> = (props) => {
    const [calendarDateRange, setCalendarDateRange] = useState<any>();
    const [dateRange, setDateRange] = useState<any>();

    const handleChange: Function = useCallback((dates: any, dateStrs: string) => {
        setDateRange(dates);
        props.onChange && props.onChange(dateStrs);
    }, [props.onChange])

    useEffect(() => {
        const {ds = {}, picker = "date"}: {
            ds?: any,
            picker?: "time" | "date" | "week" | "month" | "quarter" | "year"
        } = props;
        let newValue = ds.value || props.value;
        if (isArray(newValue)) {
            let newValues: any[] = newValue.map((item: any) => {
                return dayjs(item, Config.dateFormat[picker], getItem(Config.localLang))
            });
            setDateRange(newValues);
            props.onChange && props.onChange(newValue);
        }
    }, [props.ds, props.picker]);
    const renderSelectDateRange = useMemo(() => {
        const {picker = "date", comProps = {}}: {
            picker?: "time" | "date" | "week" | "month" | "quarter" | "year",
            comProps: any
        } = props;

        const params = {
            ...comProps,
            value: dateRange,
            picker: picker === "time" ? "date" : picker,
            disabled: props.disabled,
            onChange: handleChange,
            onCalendarChange: (days: any) => {
                setCalendarDateRange(days)
            },
            showTime: picker === "time",
            style: {width: "100%"}
        }

        if (comProps.disabledDate) {
            params.disabledDate = (current: any) => {
                if (!current) {
                    return false;
                }
                // 禁用当前时间大于最大时间
                if (current > dayjs(comProps.disabledDate[1], Config.dateFormat[picker], getItem(Config.localLang)).endOf('day')) {
                    return true;
                }
                // 禁用当前时间小于最小时间
                if (current < dayjs(comProps.disabledDate[0], Config.dateFormat[picker], getItem(Config.localLang))) {
                    return true
                }
                //禁用指定天数范围选择
                if (props.disabledDay && isNumber(props.disabledDay) && calendarDateRange) {
                    const tooLate = calendarDateRange[0] && current.diff(calendarDateRange[0], 'days') >= props.disabledDay;
                    const tooEarly = calendarDateRange[1] && calendarDateRange[1].diff(current, 'days') >= props.disabledDay;
                    return !!tooEarly || !!tooLate;
                }
                return false;
            }
        }

        return (
            <div className="sf_core_select_date_range">
                <DatePicker.RangePicker
                    {...params}
                />
            </div>
        )
    }, [dateRange, calendarDateRange, props.picker, props.disabled, props.onChange, props.comProps]);
    return (renderSelectDateRange);
};

export default React.memo(SelectDateRange);